<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p><Back></Back>商家信息</p>
		</header>
		<!-- 商家logo部分 -->
		<div class="business-logo">
			<img :src="business.businessImg">
		</div>
		<!-- 商家信息部分 -->
		<div class="business-info">
			<h1>{{business.businessName}}</h1>
			<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
			<p>{{business.businessExplain}}</p>
		</div>
		<div class="remark" @click="toRemark">
			<button>评论</button>
		</div>

		
		
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
	import Back from '../components/Back.vue';
	export default {
		name: 'Found',
		data() {
			return {
				businessId: this.$route.query.businessId,
				business: {},
				foodArr: [],
				user: {}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			//根据businessId查询商家信息
			let url1 = `BusinessController/getBusinessById/${this.businessId}`;
			this.$axios.get(url1).then(response => {
				this.business = response.data.result;
			}).catch(error => {
				console.error(error);
			});
			//根据businessId查询所属食品信息
			let url2 = `FoodController/listFoodByBusinessId/${this.businessId}`;
			this.$axios.get(url2).then(response => {
				this.foodArr = response.data.result;
				for (let i = 0; i < this.foodArr.length; i++) {
					this.foodArr[i].quantity = 0;
				}

				//如果已登录，那么需要去查询购物车中是否已经选购了某个食品
				if (this.user != null) {
					this.listCart();
				}
			}).catch(error => {
				console.error(error);
			});
		},
		components: {
		    Footer,
			Back
		},
		methods: {
			
			toRemark() {
				this.$router.push({
					path: '/remark', //跳转路径
					query: {
						businessId: this.businessId //参数
					}
				});
			}
			
			
			
			
		}
		
	}
</script>
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家logo部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		height: 20vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-info h1 {
		font-size: 5vw;
	}

	.wrapper .business-info p {
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}

	/****************** 评论部分 ******************/
	.wrapper .remark {
		display: flex;
		align-items: center;
		margin: 20vw 0 5vw 3vw;
	}

	.wrapper .remark button {
		background-color: #0084ff;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background-color 0.3s;
		margin-left: 40vw;
	}

	.wrapper .remark button:hover {
		background-color: #005cbf;
	}

	
</style>